<template>
    <div class="login">
        <el-card class="card">
            <!-- 插画 -->
            <div class="form">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <div>
                        <el-button @click="BackPage" :icon="Back" plain>Back</el-button>
                    </div>
                    <div><el-switch @change="changeSwitch" v-model="switchStore.switchValue" size="large"
                            active-text="登录" inactive-text="注册" />
                    </div>
                </div>

                <!-- 登录或注册 -->
                <Login v-if="switchStore.switchValue" />
                <Register v-else />




            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import Login from './components/login.vue'
import Register from './components/register.vue'
import { useSwitchStore } from '@/store/useswitchStore';
import { Back } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
// import { useTabStore } from "@/store/useTabStore";
// const useTab = useTabStore()
const switchStore = useSwitchStore()
const router = useRouter()

const changeSwitch = (value: boolean) => {
    switchStore.setSwitch(value)
}

const BackPage = () => {
    //返回到home页
    router.push('/')
}



</script>

<style scoped lang="scss">
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .card {
        height: 550px;
        width: 400px;
    }
}
</style>
